CSS给div一个带有圆角的渐变边框 |
您所在的位置：网站首页 › css 设置背景渐变色效果 › CSS给div一个带有圆角的渐变边框 |
CSS给div一个带有圆角的渐变边框
|
单纯的设置border-radius，是不行的，这样设置完以后渐变色边框虽然会显示,但是圆角不能出来，解决方法如下 1.先看效果 2.这是个带有渐变效果的div边框，设置代码如下 .box { border-radius: 8px; /* 设置元素边框为1像素宽度，样式为实线，颜色为透明。 */ border: 1px solid transparent; /* 设置元素边框圆角为10像素。 */ border-radius: 10px; /* 设置背景剪裁区域为内边距和边框区域。 */ background-clip: padding-box,border-box; /* 设置背景绘制区域为内边距和边框区域。 */ background-origin: padding-box,border-box; /* 设置元素的背景图像为两个线性渐变。第一个渐变从左到右，颜色从白色到白色；第二个渐变以155度角从下左到上右，颜色从rgba(116, 233, 255, 1)到rgba(64, 158, 255, 1)。 */ background-image: linear-gradient(to right, #fff, #fff), linear-gradient(155deg, rgba(116, 233, 255, 1), rgba(64, 158, 255, 1)); } 3.如果想给划入加些效果也可以做升级 |
【本文地址】
今日新闻 |
推荐新闻 |